import React from "react";
import GridWrapper from "../gridWrapper";
import LineChart from "components/charts/nationalData/lineChart";
import HorizontalLineChart from "components/charts/nationalData/horizontalLineChart";
import PieChart from "components/charts/nationalData/pieChart";

import { compose, lifecycle, withStateHandlers } from "recompose";

import nationalDataApi from "utils/api/nationalDataApi";

import "assets/less/components/charts/nationalChart.less";

// 布局位置
const layouts = {
  lg: [
    { i: "a", x: 0, y: 0, w: 24, h: 10, minH: 10, minW: 7 },
    { i: "b", x: 0, y: 0, w: 24, h: 20, minH: 10, minW: 7 },
    { i: "c", x: 20, y: 0, w: 24, h: 15, minH: 10, minW: 7 }
  ],
  md: [
    { i: "a", x: 0, y: 0, w: 20, h: 10, minH: 10, minW: 8 },
    { i: "b", x: 0, y: 0, w: 20, h: 15, minH: 10, minW: 7 },
    { i: "c", x: 10, y: 0, w: 20, h: 15, minH: 10, minW: 7 }
  ],
  sm: [
    { i: "a", x: 0, y: 0, w: 12, h: 10, minH: 10, minW: 6 },
    { i: "b", x: 0, y: 0, w: 12, h: 15, minH: 10, minW: 6 },
    { i: "c", x: 6, y: 0, w: 12, h: 15, minH: 10, minW: 6 }
  ]
};

const NationalDataChart = ({ name, nationalData }) => {
  return (
    <GridWrapper className="national-chart" layouts={layouts}>
      <LineChart
        title={name}
        name="亿元"
        nationalData={nationalData}
      />
      <HorizontalLineChart
        title={name}
        name="亿元"
        nationalData={nationalData}
      />
      <PieChart
        title={name}
        name=""
        nationalData={nationalData}
      />
    </GridWrapper>
  );
};

export default compose(
  withStateHandlers(
    () => ({
      nationalData: [],
      name: ""
    }),
    {
      updateNationalData: () => ({ nationalData, name }) => {
        return {
          nationalData,
          name
        };
      }
    }
  ),
  lifecycle({
    componentDidMount() {
      const { updateNationalData, type } = this.props;

      nationalDataApi(type).then((res) => {
        updateNationalData({ ...res });
      });
    }
  })
)(NationalDataChart);
